<template>
	<view class="flex flex-column flex-y-center container">
		<view class="y-bgc p-3 box flex flex-x-center flex-y-center mb-5 w-100" @tap="show=!show">
			<view class="text-white">{{list[active].name}}</view>
			<image src="../../static/icon/xia.png" class="icon ml-1" v-if='show'></image>
			<image src="../../static/icon/shang.png" class="icon ml-1" v-else></image>
		</view>
		<view class="w-90 item-list flex flex-column flex-y-center" v-if='show'>
			<image src="../../static/icon/shang-b.png" class="icon-1"></image>
			<view class="y-bgc rounded-6 w-100">
				<view v-for="(item,index) in list" @tap="active=index;show=!show;click(item)" class="font-weight-700 h9 flex flex-center p-3 item" :key="index" :class="active==index?'text-active':'text-white'">
					{{item.name}}
				</view>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref,defineEmits, toRefs } from 'vue'
	const show = ref(false)
	const active=ref(0)
	const emit = defineEmits(['click'])
	
	const props=defineProps({
		list:Array
	})
	const {list}=toRefs(props)
	const click=((e:any)=>{
		emit('click',e)
	})
</script>

<style>
	.container{
		position: relative;
	}
	.y-bgc {
		background-color: #1E1E1F;
	}

	.icon {
		width: 14px;
		height: 14px;
	}

	.icon-1 {
		width: 14px;
		height: 7px;
	}

	.item:not(:last-child) {
		border-bottom: 0.2px solid #FFFFFF;
	}
	
	.item-list{
		position: absolute;
		top:100%;
		z-index:9999;
	}
	.text-active{
		background: linear-gradient(to right, #3787FF 0%, #37FFEA 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
</style>